<template>
  <div id="component">
    <el-form
      ref="loginFormRef"
      :model="loginRuleForm"
      status-icon
      :rules="loginRules"
      label-width="70px"
    >
      <el-form-item label="用户名" prop="username">
        <el-input
          v-model="loginRuleForm.username"
          type="text"
          autocomplete="off"
        />
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input
          v-model="loginRuleForm.password"
          type="password"
          autocomplete="off"
        />
      </el-form-item>
      <el-form-item label="验证码" prop="captcha" class="public-form-item">
        <el-input
          v-model="loginRuleForm.captcha"
          maxlength="5"
          @keyup.enter="submitForm(loginFormRef)"
        />
        <span
          class="captha-svg"
          v-loading="loading"
          v-html="captureSrc"
          @click="captureClick"
        >
        </span>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm(loginFormRef)"
          >登入</el-button
        >
      </el-form-item>
    </el-form>
    <div class="toggle">
      <svg class="icon iconSize" aria-hidden="true">
        <!-- :xlink:href搞成响应式 可以使用计算属性控制computed -->
        <use xlink:href="#icon-shouji-iphone12-zhengmian"></use>
      </svg>
      <a href="#" @click="handleToggle()">点击切换手机登入</a>
    </div>
  </div>
</template>
<script setup>
import { reactive, ref, onMounted } from "vue";
import { ElMessage } from 'element-plus'
//引入校验函数
//出现错误 路径引入错误 少用@=>卡住时间大于一小时
import {
  loginRules,
  useSubmitForm,
} from "@/composition/loginVerification/validate";
import { useRouter } from "vue-router";
import * as api from "@/api/user.js";
import { useUsers } from "@/store/users.js";
//引入loding加载
import { ElLoading } from "element-plus";

const loginFormRef = ref();
let captureSrc = ref("");
//定义一个loding
const loading = ref(true);
//使用store
let userStore = useUsers();

//请求验证码图片
// let { getCaptchaApi, verifyCaptchaApi } = api;
onMounted(() => {
  //请求验证码图片
  captureClick();
});
//请求验证码图片
let captureClick = () => {
  //请求就打开loding
  loading.value = true;
  api.getCaptchaApi().then((res) => {
    //请求完毕就关闭loding
    loading.value = false;
    captureSrc.value = res.data.img;
  });
};
//定义编程时导航
let route = useRouter();
//表单校验成功之后,回调的方法
let loadingInstance = null;
let validateSuccess = async () => {
  //发起loding
  loadingInstance = ElLoading.service({
    // lock: true,
    text: "加载中...",
    spinner: "el-icon-loading",
    background: "rgba(0, 0, 0, .8)",
  });
  //发起登入请求
  //1.登入请求之前要先校验验证码,将验证码统一转换成小写
  try {
    let captcha = loginRuleForm.captcha.toLowerCase();
    let res = await api.verifyCaptchaApi(captcha);
    //发起登入请求
    login();
  } catch (e) {
    //输入失败直接刷新验证码
    loadingInstance.close();
    captureClick();
  }
};
//登入
let login = async () => {
  //chuasi 一下康康
  //登入时发起loding
  try {
    let res = await api.loginApi(
      loginRuleForm.username,
      loginRuleForm.password
    );
    //登录成功,跳转到首页
    //把token userInfo
    sessionStorage.setItem("cgToken",res.data.token);
    userStore.$patch({
      userInfo: res.data.userInfo,
    });
    ElMessage({
      message: "登入成功",
      type: "success",
    });
    route.push("/home");
    //关闭加载动画
    loadingInstance.close();
  } catch (e) {
    //关闭加载动画
    loadingInstance.close();
    captureClick();
  }
};
//表单校验失败,回调的方法
let validateFailed = () => {
  console.log("校验失败");
};
//使用submitForm
let submitForm = useSubmitForm(validateSuccess, validateFailed);
//定义变量
//prop需要跟这个关联起来
//注入表单的数据
const loginRuleForm = reactive({
  username: "lbw",
  password: "555",
  captcha: "",
});
//向父组件传递参数
const emits = defineEmits(["backIphone"]);
const handleToggle = () => {
  emits("backIphone", "commonLogin");
};
</script>
<style scoped lang="less">
.el-button {
  background: linear-gradient(90deg, #1596fb, #002dff);
  width: 340px;
}
#component {
  height: 100%;
  .toggle {
    // background: rgba(0, 0, 0,.3);
    text-align: center;
    width: 80%;
    margin: 0 auto;
    .iconSize {
      width: 2em;
      height: 2em;
      vertical-align: middle;
    }
    a {
      color: #fff;
      text-decoration: none;
    }
  }
}
.el-input {
  height: 45px;
}
</style>
